<template>
  <div class="swiper">
  	<swiper
  	  :indicator-dots="true"
  	  indicator-color="#EA5149"
  	  :autoplay="true"
  	  :interval="6000"
  	  :duration="1000"
  	  :circular="true">
  	  <div :key="imgindex" v-for="(top, imgindex) in imgUrls">
  	  	<swiper-item>
  	  	  <img
  	  	    @click="bookDetail(img)"
  	  	    class="slide-image"
  	  	    mode="aspectFit"
  	  	    v-for="img in top"
  	  	    :key="img.id"
  	  	    :src="img.image">
  	    </swiper-item>
  	  </div>
  	</swiper>
  </div>
</template>

<script>
export default {
  props: {
    tops: Array
  },
  computed: {
    imgUrls () {
      // 如果通用请用chunk函数比如lodash的chunk方法
      let res = this.tops
      return [res.slice(0, 3), res.slice(3, 6), res.slice(6)]
    }
  },
  methods: {
    bookDetail (img) {
      wx.navigateTo({
        url: '/pages/detail/main?id=' + img.id
      })
    }
  }
}
</script>

<style lang="scss">
.swiper{
  margin-top:5px;
  .slide-image{
    width:33%;
    height:250rpx;
  }
}
</style>